import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, } from "react-router-dom";
import { Layout, Card, Skeleton, Row, Col, Statistic, Progress, Badge, List, Button, Spin, message } from "antd";
import { Tabs, NoticeBar, NavBar, Icon } from 'antd-mobile';
import {
    getSchoolInformationBySchool,
    getSchoolSecurityDataAndRank,
} from "../js/api.js";
import '../css/wechatmobile.css';
import moment from 'moment';
import { CheckconditionDataForPatrolpush } from "../js/patrolpushapi.js";
import { getToDayInspectPlanApi, InspectConditionDataForInpsectpush, weChatInspectPlanRecoverApi } from "../js/inspectpushapi.js";
const echarts = require('echarts');
const { Content, Sider } = Layout;

class WechatProgressRequiry extends Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }

    componentDidMount() {
        // var useragent = navigator.userAgent;
        // if (useragent.match(/MicroMessenger/i) != 'MicroMessenger' || navigator.userAgent.toLowerCase().indexOf('dingtalk') == -1) {
        //     window.location.href = "wxError.html";//若不是微信浏览器，跳转到温馨error页面
        // }
    }


    render() {
        return (
            <Router basename="wechatsecurityrank">
                <Layout style={{ backgroundColor: '#f5f5f5' }}>
                    <Content>
                        <Route path="/" component={WeChatProgressRequiryMain} />
                    </Content>
                </Layout>
            </Router>
        );
    }
}

class WeChatProgressRequiryMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    componentDidMount() { }


    render() {
        const tabs = [
            { title: '今日巡更', sub: '1' },
            { title: '日巡检进度', sub: '2' },
            { title: '周巡检进度', sub: '3' },
            { title: '月巡检进度', sub: '4' },
        ];
        return (
            <div>
                <Tabs tabs={tabs}
                    initialPage={0}
                    onChange={(tab, index) => { console.log('onChange', index, tab); }}
                    onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                >
                    <div style={{ alignItems: 'center', justifyContent: 'center', height: 'document.documentElement.scrollHeight', backgroundColor: 'rgb(245,245,245)' }}>
                        <SchoolPatrolpushMain />
                    </div>
                    <div style={{ alignItems: 'center', justifyContent: 'center', height: 'document.documentElement.scrollHeight', backgroundColor: 'rgb(245,245,245)' }}>
                        <TodaySchoolInspectpushMain />
                    </div>
                    <div style={{ alignItems: 'center', justifyContent: 'center', height: 'document.documentElement.scrollHeight', backgroundColor: 'rgb(245,245,245)' }}>
                        <WeekSchoolInspectpushMain />
                    </div>
                    <div style={{ alignItems: 'center', justifyContent: 'center', height: 'document.documentElement.scrollHeight', backgroundColor: 'rgb(245,245,245)' }}>
                        <MonthSchoolInspectpushMain />
                    </div>
                </Tabs>
            </div>
        );
    }

}


class SchoolPatrolpushMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            schoolId: 0,
            should: 0,
            done: 0,
            confirmLoading: false,
            flag: true
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {
        this.setState({
            confirmLoading: true,
        });

        let schoolId = this.getUrlParam("departmentId");
        // let schoolId = 4;
        let date = moment().format('YYYY-MM-DD');

        this.setState({
            schoolId: schoolId,
            date: date,
        });

        CheckconditionDataForPatrolpush(schoolId, date)
            .then((res2) => {
                if (res2.data.data.length == 0) {
                    this.setState({
                        flag: false
                    });
                } else {
                    //得到整个页面的数据
                    let dataTemp = []
                    res2.data.data.forEach((item, index) => {
                        let temp = {
                            timePeriod: item.createTime,
                            people: item.realName,
                            routeDoneNum: item.routeDoneNum,
                            symbol: item.symbol,
                            routeRightNum: item.routeRightNum,
                            routeName: item.routeName,
                            routeNameId: item.routeNameId,
                            routeNum: item.routeNum
                        };
                        dataTemp.push(temp);
                    });
                    //console.log(dataTemp);
                    let percent = ((res2.data.done > res2.data.should ? (res2.data.should) : (res2.data.done)) / res2.data.should * 100).toFixed(2);
                    if (percent == 100) {
                        percent = Number(percent).toFixed(0);
                    }

                    this.setState({
                        data: dataTemp.reverse(),
                        routeNum: res2.data.routeNum,
                        should: res2.data.should,
                        done: res2.data.done,
                        percent: percent,
                        schoolId: res2.data.schoolId,

                        confirmLoading: false,
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

    }

    getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    render() {
        //console.log(percent);
        let cards = this.state.data.map((d, index) => {
            console.log(d.routeRightNum);
            let normative = (d.routeRightNum / d.routeNum * 100).toFixed(2); //打卡规范性(准确率)
            if (normative == 100) {
                normative = Number(normative).toFixed(0);
            }
            // ((d.routeDoneNum > 23 ? 23 : d.routeDoneNum) / this.state.routeNum * 100).toFixed(2);
            let completionRate = ((d.routeDoneNum / d.routeNum) * 100).toFixed(2);
            if (completionRate == 100) {
                completionRate = Number(completionRate).toFixed(0);
            }

            let data = [{
                title: '巡更路线',
                description: (<div style={{ color: '#000000' }}>{d.routeName}</div>)
            }, {
                title: '巡更人员',
                description: (<div style={{ color: '#000000' }}>{d.people}</div>)
            }, {
                title: '巡更点位',
                description: (<div style={{ color: '#000000' }}>{d.routeNum + '个'}</div>)
            }, {
                title: '实际巡更',
                description: (<div style={{ color: '#000000' }}>{d.routeDoneNum + '个'}</div>)
            },
            {
                title: '完成率',
                description: (<div style={{ color: '#000000' }}>{completionRate + '%'}</div>)
            }];

            return (
                <div>
                    {this.state.flag == true ?
                        (<Link
                            style={{ textDecoration: 'none' }}
                            to={{
                                pathname: '/detail',
                                state: {
                                    symbol: d.symbol,
                                    schoolId: this.state.schoolId,
                                    routeNameId: d.routeNameId,
                                    completionRate: completionRate
                                }
                            }}>
                            <Card
                                key={index}
                                title={d.timePeriod}
                                // extra={'详情 >'}
                                className='conditionCard'
                                style={{ boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)' }}
                                bodyStyle={{
                                    padding: '10px 24px',
                                }}>
                                <Layout>
                                    <Content style={{ background: '#fff' }}>
                                        <List
                                            itemLayout="horizontal"
                                            style={{ marginRight: 25 }}
                                            size="small"
                                            bordered={false}
                                            split={false}
                                            dataSource={data}
                                            renderItem={item => (
                                                <List.Item>
                                                    <Row
                                                        type="flex"
                                                        justify="space-between"
                                                        style={{
                                                            width: "100%"
                                                        }}>
                                                        <Col span={8} xs={10}>
                                                            {item.title}
                                                        </Col>
                                                        <Col
                                                            // style={{ textAlign: "end" }}
                                                            span={16} xs={14}>
                                                            {item.description}
                                                        </Col>
                                                    </Row>
                                                </List.Item>
                                            )}
                                        />
                                    </Content>
                                    <Sider width={'25%'} style={{ background: '#fff' }}>
                                        <Progress
                                            className='progress-center'
                                            style={{
                                                fontSize: '12px'
                                            }}
                                            size='small'
                                            type="circle"
                                            percent={normative}
                                            width={85}
                                            strokeWidth={8}
                                            format={percent => `准确率${percent}%`}
                                        />
                                    </Sider>
                                </Layout>
                            </Card>
                        </Link>) : null}
                </div>
            )
        });


        return (
            <div>
                {this.state.flag == true ?
                    (<div style={{ paddingBottom: '10px' }}>
                        <Skeleton loading={this.state.confirmLoading} active>
                            <div
                                className='conditionCard'
                                style={{
                                    boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)',
                                    textAlign: 'center',
                                    padding: '12px 24px',
                                    background: '#ffffff',
                                }}>
                                <div>
                                    日期：
                                    {this.state.date}
                                </div>
                                <div>
                                    <Progress
                                        type="circle"
                                        percent={this.state.percent}
                                        width={150}
                                        strokeWidth={8}
                                        style={{ marginTop: '10px', fontSize: '28px' }}
                                        format={percent => `完成率${percent}%`}
                                    />
                                </div>
                                <div>
                                    <Row style={{ marginTop: '10px', }}>
                                        <Col span={12}>
                                            <Badge
                                                status="success"
                                                text={"已巡计划：" + this.state.done + "个"} />
                                        </Col>
                                        <Col span={12}>
                                            <Badge
                                                status="error"
                                                text={"未巡计划：" + (this.state.should - this.state.done) + "个"} />
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                            <div style={{
                                width: '100%',
                                marginTop: '10px',
                            }}>
                                {cards}
                            </div>
                        </Skeleton>
                    </div>) : (
                        <div style={{ textAlign: 'center', paddingTop: '12.5rem' }}>
                            <img className="icon" src={require("../img/attention.png")} />
                            <h4 className="tip">本校暂无今日巡更计划，请前往后台配置！</h4>
                        </div>
                    )}
            </div>
        )
    }

}

class TodaySchoolInspectpushMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
            classData: [],
            schoolId: undefined,
            date: undefined,
            confirmLoading: false,
            flag: true,
            // need: false,
            // total: 0,
            // generate: 0,
            // loading: false
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() { //date与schoolId
        this.setState({
            confirmLoading: true,
        });

        let schoolId = this.getUrlParam("departmentId");
        // let schoolId = 13;
        let date = moment().format('YYYY-MM-DD');

        this.setState({
            schoolId: schoolId,
            date: date
        });

        // this.getToDayInspectPlan(date, "日", schoolId)

        InspectConditionDataForInpsectpush(schoolId, date, 'ri')
            .then((res) => {
                //得到上半个页面的数据
                if (res.data.data.length == 0) {
                    this.setState({
                        flag: false
                    });
                } else {
                    let classData = [];
                    res.data.data.forEach((item, index) => {
                        classData.push({
                            key: index + 1,
                            teamId: parseInt(item.classId),
                            teamName: '日巡检 ' + item.className,
                            teamMates: item.classMates,
                            should: parseInt(item.should), //应巡计划数量
                            real: parseInt(item.real), //完成计划数量
                            abnormal: parseInt(item.abnormal), //发现异常项目数
                            done: parseInt(item.done), //完成项目数
                            all: parseInt(item.all), //总项目数
                        });
                    });
                    this.setState({
                        classData: classData,
                        should: res.data.shouldAllClass, //应巡计划数量
                        real: res.data.realAllClass, //实巡计划数量
                        abnormal: res.data.abnormalAllClass, //异常项目数量
                        done: res.data.doneAllClass, //完成项目数
                        all: res.data.allAllClass, //总项目数
                        confirmLoading: false,
                        // flag: true
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    // getToDayInspectPlan = (date, cycle, schoolId) => {
    //     getToDayInspectPlanApi(date, cycle, schoolId).then((res) => {
    //         if (res.data) {
    //             this.setState({
    //                 need: res.data.need == 1 ? true : false,
    //                 total: res.data.total,
    //                 generate: res.data.generate
    //             })
    //         }
    //     }).catch((e) => {
    //         if (e.response) {
    //             //请求已发出，服务器返回状态码不是2xx。
    //             console.info(e.response.data)
    //             console.info(e.response.status)
    //             console.info(e.response.headers)
    //         } else if (e.request) {
    //             // 请求已发出，但没有收到响应
    //             // e.request 在浏览器里是一个XMLHttpRequest实例，
    //             // 在node中是一个http.ClientRequest实例
    //             console.info(e.request)
    //         } else {
    //             //发送请求时异常，捕捉到错误
    //             console.info('error', e.message)
    //         }
    //         console.info(e.config)
    //     });
    // }

    // weChatInspectPlanRecover = () => {
    //     this.setState({
    //         loading: true
    //     })
    //     let date = moment().format("YYYY-MM-DD")
    //     let cycle = "日"
    //     let schoolId = parseInt(this.getUrlParam("departmentId"))
    //     weChatInspectPlanRecoverApi(date, cycle, schoolId).then((res) => {
    //         if(res.data == "success") {
    //             message.success("生成计划成功")
    //             this.refreshData()
    //             this.setState({
    //                 need: false
    //             })
    //         }
    //         this.setState({
    //             loading: false
    //         })
    //     }).catch((e) => {
    //         if (e.response) {
    //             //请求已发出，服务器返回状态码不是2xx。
    //             console.info(e.response.data)
    //             console.info(e.response.status)
    //             console.info(e.response.headers)
    //         } else if (e.request) {
    //             // 请求已发出，但没有收到响应
    //             // e.request 在浏览器里是一个XMLHttpRequest实例，
    //             // 在node中是一个http.ClientRequest实例
    //             console.info(e.request)
    //         } else {
    //             //发送请求时异常，捕捉到错误
    //             console.info('error', e.message)
    //         }
    //         message.error("生成计划失败")
    //         this.setState({
    //             loading: false
    //         })
    //         console.info(e.config)
    //     });
    // }

    render() {
        let cards = this.state.classData.map((d, index) => {
            let completionRate = (d.done / d.all * 100).toFixed(2);
            if (completionRate == 100) {
                completionRate = Number(completionRate).toFixed(0);
            }
            let data = [{
                title: '班组成员',
                description: (
                    <div className='wechatPushCardDescription'>{d.teamMates}</div>
                )
            }, {
                title: '全部项目',
                description: (
                    <div className='wechatPushCardDescription'>{d.all}</div>
                )
            }, {
                title: '完成项目',
                description: (
                    <div className='wechatPushCardDescription'>{d.done}</div>
                )
            }, {
                title: '发现异常',
                description: (
                    <div className='wechatPushCardDescription'>{d.abnormal}</div>
                )
            }];

            return (
                <div>
                    {this.state.flag == true ?

                        (<div>
                            
                            <Link
                                style={{ textDecoration: 'none' }}
                                to={{
                                    pathname: '/classinspect',
                                    state: {
                                        schoolId: this.state.schoolId,
                                        teamId: d.teamId,
                                        teamName: d.teamName,
                                        teamMates: d.teamMates,
                                        should: d.should,
                                        real: d.real,
                                        abnormal: d.abnormal,
                                        done: d.done,
                                        all: d.all
                                    }
                                }}>
                                <Card
                                    key={index}
                                    title={d.teamName}
                                    // extra={'详情 >'}
                                    className='conditionCard'
                                    style={{ boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)' }}
                                    bodyStyle={{
                                        padding: '10px 24px',
                                    }}>
                                    <Layout>
                                        <Content style={{ background: '#fff' }}>
                                            <List
                                                itemLayout="horizontal"
                                                style={{ marginRight: 25 }}
                                                size="small"
                                                bordered={false}
                                                split={false}
                                                dataSource={data}
                                                renderItem={item => (
                                                    <List.Item>
                                                        <Row
                                                            type="flex"
                                                            justify="space-between"
                                                            style={{
                                                                width: "100%"
                                                            }}>
                                                            <Col span={8} xs={10}>
                                                                {item.title}
                                                            </Col>
                                                            <Col
                                                                style={{ textAlign: "end" }}
                                                                span={16} xs={14}>
                                                                {item.description}
                                                            </Col>
                                                        </Row>
                                                    </List.Item>
                                                )}
                                            />
                                        </Content>
                                        <Sider width={'25%'} style={{ background: '#fff' }}>
                                            <Progress
                                                className='progress-center'
                                                style={{
                                                    fontSize: '12px',
                                                }}
                                                size='small'
                                                type="circle"
                                                percent={completionRate}
                                                width={85}
                                                strokeWidth={8}
                                                format={percent => `完成率${percent}%`}
                                            />
                                        </Sider>
                                    </Layout>
                                </Card>
                            </Link>
                        </div>
                        ) : null}
                </div>
            )
        });
        let percent
        if (this.state.should != 0) {
            percent = (this.state.done / this.state.all * 100).toFixed(2);
        } else {
            percent = '00.00'
        }
        console.log("percent", percent)
        if (percent == 100) {
            percent = Number(percent).toFixed(0);
        }

        return (
            <div>
                {this.state.flag == true ?
                    (<div style={{ paddingBottom: '10px'}}>
                        <Skeleton loading={this.state.confirmLoading} active>
                            <div
                                className='conditionCard'
                                style={{
                                    boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)',
                                    textAlign: 'center',
                                    padding: '12px 24px',
                                    background: '#ffffff',
                                }}>
                                <div>
                                    日期：
                                    {moment().format('YYYY-MM-DD')}
                                </div>
                                <div>
                                    <Progress
                                        type="circle"
                                        percent={percent}
                                        width={150}
                                        strokeWidth={8}
                                        style={{ marginTop: '10px', fontSize: '28px' }}
                                        format={percent => `完成率${percent}%`}
                                    />
                                </div>

                                <div>
                                    <Row style={{ marginTop: '10px', }}>
                                        <Col span={12}>
                                            <Badge
                                                status="processing"
                                                text={"应巡计划：" + this.state.should + "个"} />
                                        </Col>
                                        <Col span={12}>
                                            <Badge
                                                status="success"
                                                text={"实际完成：" + this.state.real + "个"} />
                                        </Col>
                                        <Col span={24}>
                                            <Badge
                                                status="warning"
                                                text={"巡检项目数/已完成数/发现隐患数：" +
                                                    this.state.all + "/" + this.state.done + "/" + this.state.abnormal} />
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                            {/* {this.state.need == true ?
                                <div className="gegeratePlan" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', zIndex: '99'}}>
                                    <span>缺失计划，可手动生成缺失的计划</span>
                                    <Button style={{ width: '60%', marginTop: '20px'}} type="primary" loading={this.state.loading} onClick={this.weChatInspectPlanRecover}>生成今日计划</Button>
                                </div> : null} */}
                            <div style={{
                                width: '100%',
                                marginTop: '10px',
                            }}>
                                {cards}
                            </div>
                        </Skeleton>
                    </div>) : (
                        <div style={{ textAlign: 'center', paddingTop: '12.5rem' }}>
                            <div>
                                    <img className="icon" src={require("../img/attention.png")} />
                                    <h4 className="tip">本校暂无日巡检计划，请前往后台配置！</h4>
                                </div>
                            {/* {this.state.need == true ?
                                <div className="gegeratePlan" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', zIndex: '99'}}>
                                    <span>缺失计划，可手动生成缺失的计划</span>
                                    <Button style={{ width: '60%', marginTop: '20px'}} type="primary" loading={this.state.loading} onClick={this.weChatInspectPlanRecover}>生成今日计划</Button>
                                </div> : 
                                } */}
                        </div>
                    )}
            </div>
        )
    }
}

class WeekSchoolInspectpushMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
            classData: [],
            schoolId: undefined,
            date: undefined,
            confirmLoading: false,
            flag: true,
            // need: false,
            // total: 0,
            // generate: 0,
            // loading: false
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() { //date与schoolId
        this.setState({
            confirmLoading: true,
        });

        let schoolId = this.getUrlParam("departmentId");
        // let schoolId = 13 ;
        let date = moment().week(moment().week()).startOf('week').add(5, "days").format('YYYY-MM-DD');
        let now = moment().format('YYYY-MM-DD');
        this.setState({
            schoolId: schoolId,
            date: date,
        });

        // this.getToDayInspectPlan(now, "周", schoolId)

        InspectConditionDataForInpsectpush(schoolId, date, 'zhou')
            .then((res) => {
                if (res.data.data.length == 0) {
                    this.setState({
                        flag: false
                    });
                } else {
                    //得到上半个页面的数据
                    let classData = [];
                    res.data.data.forEach((item, index) => {
                        classData.push({
                            key: index + 1,
                            teamId: parseInt(item.classId),
                            teamName: '周巡检 ' + item.className,
                            teamMates: item.classMates,
                            should: parseInt(item.should), //应巡计划数量
                            real: parseInt(item.real), //完成计划数量
                            abnormal: parseInt(item.abnormal), //发现异常项目数
                            done: parseInt(item.done), //完成项目数
                            all: parseInt(item.all), //总项目数
                        });
                    });
                    this.setState({
                        classData: classData,
                        should: res.data.shouldAllClass, //应巡计划数量
                        real: res.data.realAllClass, //实巡计划数量
                        abnormal: res.data.abnormalAllClass, //异常项目数量
                        done: res.data.doneAllClass, //完成项目数
                        all: res.data.allAllClass, //总项目数
                        confirmLoading: false,
                        // flag: true
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    // getToDayInspectPlan = (date, cycle, schoolId) => {
    //     getToDayInspectPlanApi(date, cycle, schoolId).then((res) => {
    //         if (res.data) {
    //             this.setState({
    //                 need: res.data.need == 1 ? true : false,
    //                 total: res.data.total,
    //                 generate: res.data.generate
    //             })
    //         }
    //     }).catch((e) => {
    //         if (e.response) {
    //             //请求已发出，服务器返回状态码不是2xx。
    //             console.info(e.response.data)
    //             console.info(e.response.status)
    //             console.info(e.response.headers)
    //         } else if (e.request) {
    //             // 请求已发出，但没有收到响应
    //             // e.request 在浏览器里是一个XMLHttpRequest实例，
    //             // 在node中是一个http.ClientRequest实例
    //             console.info(e.request)
    //         } else {
    //             //发送请求时异常，捕捉到错误
    //             console.info('error', e.message)
    //         }
    //         console.info(e.config)
    //     });
    // }

    // weChatInspectPlanRecover = () => {
    //     this.setState({
    //         loading: true
    //     })
    //     let date = moment().format("YYYY-MM-DD")
    //     let cycle = "周"
    //     let schoolId = parseInt(this.getUrlParam("departmentId"))
    //     weChatInspectPlanRecoverApi(date, cycle, schoolId).then((res) => {
    //         if(res.data == "success") {
    //             message.success("生成计划成功")
    //             this.refreshData()
    //             this.setState({
    //                 need: false
    //             })
    //         }
    //         this.setState({
    //             loading: false
    //         })
    //     }).catch((e) => {
    //         if (e.response) {
    //             //请求已发出，服务器返回状态码不是2xx。
    //             console.info(e.response.data)
    //             console.info(e.response.status)
    //             console.info(e.response.headers)
    //         } else if (e.request) {
    //             // 请求已发出，但没有收到响应
    //             // e.request 在浏览器里是一个XMLHttpRequest实例，
    //             // 在node中是一个http.ClientRequest实例
    //             console.info(e.request)
    //         } else {
    //             //发送请求时异常，捕捉到错误
    //             console.info('error', e.message)
    //         }
    //         message.error("生成计划失败")
    //         this.setState({
    //             loading: false
    //         })
    //         console.info(e.config)
    //     });
    // }

    getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    render() {
        let cards = this.state.classData.map((d, index) => {
            let completionRate = (d.done / d.all * 100).toFixed(2);
            if (completionRate == 100) {
                completionRate = Number(completionRate).toFixed(0);
            }
            let data = [{
                title: '班组成员',
                description: (
                    <div className='wechatPushCardDescription'>{d.teamMates}</div>
                )
            }, {
                title: '全部项目',
                description: (
                    <div className='wechatPushCardDescription'>{d.all}</div>
                )
            }, {
                title: '完成项目',
                description: (
                    <div className='wechatPushCardDescription'>{d.done}</div>
                )
            }, {
                title: '发现异常',
                description: (
                    <div className='wechatPushCardDescription'>{d.abnormal}</div>
                )
            }];

            return (
                <div>
                    {this.state.flag == true ?
                        (<Link
                            style={{ textDecoration: 'none' }}
                            to={{
                                pathname: '/classinspect',
                                state: {
                                    schoolId: this.state.schoolId,
                                    teamId: d.teamId,
                                    teamName: d.teamName,
                                    teamMates: d.teamMates,
                                    should: d.should,
                                    real: d.real,
                                    abnormal: d.abnormal,
                                    done: d.done,
                                    all: d.all,
                                }
                            }}>
                            <Card
                                key={index}
                                title={d.teamName}
                                // extra={'详情 >'}
                                className='conditionCard'
                                style={{ boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)' }}
                                bodyStyle={{
                                    padding: '10px 24px',
                                }}>
                                <Layout>
                                    <Content style={{ background: '#fff' }}>
                                        <List
                                            itemLayout="horizontal"
                                            style={{ marginRight: 25 }}
                                            size="small"
                                            bordered={false}
                                            split={false}
                                            dataSource={data}
                                            renderItem={item => (
                                                <List.Item>
                                                    <Row
                                                        type="flex"
                                                        justify="space-between"
                                                        style={{
                                                            width: "100%"
                                                        }}>
                                                        <Col span={8} xs={10}>
                                                            {item.title}
                                                        </Col>
                                                        <Col
                                                            style={{ textAlign: "end" }}
                                                            span={16} xs={14}>
                                                            {item.description}
                                                        </Col>
                                                    </Row>
                                                </List.Item>
                                            )}
                                        />
                                    </Content>
                                    <Sider width={'25%'} style={{ background: '#fff' }}>
                                        <Progress
                                            className='progress-center'
                                            style={{
                                                fontSize: '12px',
                                            }}
                                            size='small'
                                            type="circle"
                                            percent={completionRate}
                                            width={85}
                                            strokeWidth={8}
                                            format={percent => `完成率${percent}%`}
                                        />
                                    </Sider>
                                </Layout>
                            </Card>
                        </Link>) : null}
                </div>
            )
        });
        let percent
        if (this.state.should != 0) {
            percent = (this.state.done / this.state.all * 100).toFixed(2);
        } else {
            percent = '00.00'
        }
        console.log("percent", percent)
        if (percent == 100) {
            percent = Number(percent).toFixed(0);
        }

        return (
            <div>
                {this.state.flag == true ?
                    (<div style={{ paddingBottom: '10px' }}>
                        <Skeleton loading={this.state.confirmLoading} active>
                            <div
                                className='conditionCard'
                                style={{
                                    boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)',
                                    textAlign: 'center',
                                    padding: '12px 24px',
                                    background: '#ffffff',
                                }}>
                                <div>
                                    日期时段：
                                    {(moment().week(moment().week()).startOf('week').add(1, "days").format('YYYY-MM-DD') + " ~ " + moment().format('YYYY-MM-DD'))}
                                </div>
                                <div>
                                    <Progress
                                        type="circle"
                                        percent={percent}
                                        width={150}
                                        strokeWidth={8}
                                        style={{ marginTop: '10px', fontSize: '28px' }}
                                        format={percent => `完成率${percent}%`}
                                    />
                                </div>

                                <div>
                                    <Row style={{ marginTop: '10px', }}>
                                        <Col span={12}>
                                            <Badge
                                                status="processing"
                                                text={"应巡计划：" + this.state.should + "个"} />
                                        </Col>
                                        <Col span={12}>
                                            <Badge
                                                status="success"
                                                text={"实际完成：" + this.state.real + "个"} />
                                        </Col>
                                        <Col span={24}>
                                            <Badge
                                                status="warning"
                                                text={"巡检项目数/已完成数/发现隐患数：" +
                                                    this.state.all + "/" + this.state.done + "/" + this.state.abnormal} />
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                            {/* {this.state.need == true ?
                                <div className="gegeratePlan" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', zIndex: '99'}}>
                                    <span>缺失计划，可手动生成缺失的计划</span>
                                    <Button style={{ width: '60%', marginTop: '20px'}} type="primary" loading={this.state.loading} onClick={this.weChatInspectPlanRecover}>生成本周计划</Button>
                                </div> : null} */}
                            <div style={{
                                width: '100%',
                                marginTop: '10px',
                            }}>
                                {cards}
                            </div>
                        </Skeleton>
                    </div>) : (
                        <div style={{ textAlign: 'center', paddingTop: '12.5rem' }}>
                            <div>
                                <img className="icon" src={require("../img/attention.png")} />
                                <h4 className="tip">本校暂无周巡检计划，请前往后台配置！</h4>
                            </div>
                        {/* {this.state.need == true ?
                            <div className="gegeratePlan" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', zIndex: '99'}}>
                                <span>缺失计划，可手动生成缺失的计划</span>
                                <Button style={{ width: '60%', marginTop: '20px'}} type="primary" loading={this.state.loading} onClick={this.weChatInspectPlanRecover}>生成本周计划</Button>
                            </div> : 
                            <div>
                                <img className="icon" src={require("../img/attention.png")} />
                                <h4 className="tip">本校暂无周巡检计划，请前往后台配置！</h4>
                            </div>} */}
                    </div>
                    )}
            </div>
        )
    }
}

class MonthSchoolInspectpushMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
            classData: [],
            schoolId: undefined,
            date: undefined,
            confirmLoading: false,
            flag: true,
            // need: false,
            // total: 0,
            // generate: 0,
            // loading: false
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() { //date与schoolId
        this.setState({
            confirmLoading: true,
        });

        let schoolId = this.getUrlParam("departmentId");
        // let schoolId = 4 ;
        let date = moment().endOf('month').format('YYYY-MM-DD');
        let now = moment().format('YYYY-MM-DD');

        this.setState({
            schoolId: schoolId,
            date: date,
        });

        // this.getToDayInspectPlan(now, "月", schoolId)

        InspectConditionDataForInpsectpush(schoolId, date, 'yue')
            .then((res) => {
                if (res.data.data.length == 0) {
                    this.setState({
                        flag: false
                    });
                } else {
                    //得到上半个页面的数据
                    let classData = [];
                    res.data.data.forEach((item, index) => {
                        classData.push({
                            key: index + 1,
                            teamId: parseInt(item.classId),
                            teamName: '月巡检 ' + item.className,
                            teamMates: item.classMates,
                            should: parseInt(item.should), //应巡计划数量
                            real: parseInt(item.real), //完成计划数量
                            abnormal: parseInt(item.abnormal), //发现异常项目数
                            done: parseInt(item.done), //完成项目数
                            all: parseInt(item.all), //总项目数
                        });
                    });
                    this.setState({
                        classData: classData,
                        should: res.data.shouldAllClass, //应巡计划数量
                        real: res.data.realAllClass, //实巡计划数量
                        abnormal: res.data.abnormalAllClass, //异常项目数量
                        done: res.data.doneAllClass, //完成项目数
                        all: res.data.allAllClass, //总项目数
                        confirmLoading: false,
                        flag: true
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    // getToDayInspectPlan = (date, cycle, schoolId) => {
    //     getToDayInspectPlanApi(date, cycle, schoolId).then((res) => {
    //         if (res.data) {
    //             this.setState({
    //                 need: res.data.need == 1 ? true : false,
    //                 total: res.data.total,
    //                 generate: res.data.generate
    //             })
    //         }
    //     }).catch((e) => {
    //         if (e.response) {
    //             //请求已发出，服务器返回状态码不是2xx。
    //             console.info(e.response.data)
    //             console.info(e.response.status)
    //             console.info(e.response.headers)
    //         } else if (e.request) {
    //             // 请求已发出，但没有收到响应
    //             // e.request 在浏览器里是一个XMLHttpRequest实例，
    //             // 在node中是一个http.ClientRequest实例
    //             console.info(e.request)
    //         } else {
    //             //发送请求时异常，捕捉到错误
    //             console.info('error', e.message)
    //         }
    //         console.info(e.config)
    //     });
    // }

    // weChatInspectPlanRecover = () => {
    //     this.setState({
    //         loading: true
    //     })
    //     let date = moment().format("YYYY-MM-DD")
    //     let cycle = "月"
    //     let schoolId = parseInt(this.getUrlParam("departmentId"))
    //     weChatInspectPlanRecoverApi(date, cycle, schoolId).then((res) => {
    //         if(res.data == "success") {
    //             message.success("生成计划成功")
    //             this.refreshData()
    //             this.setState({
    //                 need: false
    //             })
    //         }
    //         this.setState({
    //             loading: false
    //         })
    //     }).catch((e) => {
    //         if (e.response) {
    //             //请求已发出，服务器返回状态码不是2xx。
    //             console.info(e.response.data)
    //             console.info(e.response.status)
    //             console.info(e.response.headers)
    //         } else if (e.request) {
    //             // 请求已发出，但没有收到响应
    //             // e.request 在浏览器里是一个XMLHttpRequest实例，
    //             // 在node中是一个http.ClientRequest实例
    //             console.info(e.request)
    //         } else {
    //             //发送请求时异常，捕捉到错误
    //             console.info('error', e.message)
    //         }
    //         message.error("生成计划失败")
    //         this.setState({
    //             loading: false
    //         })
    //         console.info(e.config)
    //     });
    // }

    getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    render() {
        let cards = this.state.classData.map((d, index) => {
            let completionRate = (d.done / d.all * 100).toFixed(2);
            if (completionRate == 100) {
                completionRate = Number(completionRate).toFixed(0);
            }
            let data = [{
                title: '班组成员',
                description: (
                    <div className='wechatPushCardDescription'>{d.teamMates}</div>
                )
            }, {
                title: '全部项目',
                description: (
                    <div className='wechatPushCardDescription'>{d.all}</div>
                )
            }, {
                title: '完成项目',
                description: (
                    <div className='wechatPushCardDescription'>{d.done}</div>
                )
            }, {
                title: '发现异常',
                description: (
                    <div className='wechatPushCardDescription'>{d.abnormal}</div>
                )
            }];
            return (
                <div>
                    {this.state.flag == true ?
                        (<Link
                            style={{ textDecoration: 'none' }}
                            to={{
                                pathname: '/classinspect',
                                state: {
                                    schoolId: this.state.schoolId,
                                    teamId: d.teamId,
                                    teamName: d.teamName,
                                    teamMates: d.teamMates,
                                    should: d.should,
                                    real: d.real,
                                    abnormal: d.abnormal,
                                    done: d.done,
                                    all: d.all,
                                }
                            }}>
                            <Card
                                key={index}
                                title={d.teamName}
                                // extra={'详情 >'}
                                className='conditionCard'
                                style={{ boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)' }}
                                bodyStyle={{
                                    padding: '10px 24px',
                                }}>
                                <Layout>
                                    <Content style={{ background: '#fff' }}>
                                        <List
                                            itemLayout="horizontal"
                                            style={{ marginRight: 25 }}
                                            size="small"
                                            bordered={false}
                                            split={false}
                                            dataSource={data}
                                            renderItem={item => (
                                                <List.Item>
                                                    <Row
                                                        type="flex"
                                                        justify="space-between"
                                                        style={{
                                                            width: "100%"
                                                        }}>
                                                        <Col span={8} xs={10}>
                                                            {item.title}
                                                        </Col>
                                                        <Col
                                                            style={{ textAlign: "end" }}
                                                            span={16} xs={14}>
                                                            {item.description}
                                                        </Col>
                                                    </Row>
                                                </List.Item>
                                            )}
                                        />
                                    </Content>
                                    <Sider width={'25%'} style={{ background: '#fff' }}>
                                        <Progress
                                            className='progress-center'
                                            style={{
                                                fontSize: '12px',
                                            }}
                                            size='small'
                                            type="circle"
                                            percent={completionRate}
                                            width={85}
                                            strokeWidth={8}
                                            format={percent => `完成率${percent}%`}
                                        />
                                    </Sider>
                                </Layout>
                            </Card>
                        </Link>) : null}
                </div>
            )
        });
        let percent
        if (this.state.should != 0) {
            percent = (this.state.done / this.state.all * 100).toFixed(2);
        } else {
            percent = '00.00'
        }
        console.log("percent", percent)
        if (percent == 100) {
            percent = Number(percent).toFixed(0);
        }

        return (
            <div>
                {this.state.flag == true ?
                    (<div style={{ paddingBottom: '10px' }}>
                        <Skeleton loading={this.state.confirmLoading} active>
                            <div
                                className='conditionCard'
                                style={{
                                    boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)',
                                    textAlign: 'center',
                                    padding: '12px 24px',
                                    background: '#ffffff',
                                }}>
                                <div>
                                    日期时段：
                                    {(moment().startOf('month').format('YYYY-MM-DD') + " ~ " + moment().format('YYYY-MM-DD'))}
                                </div>
                                <div>
                                    <Progress
                                        type="circle"
                                        percent={percent}
                                        width={150}
                                        strokeWidth={8}
                                        style={{ marginTop: '10px', fontSize: '28px' }}
                                        format={percent => `完成率${percent}%`}
                                    />
                                </div>

                                <div>
                                    <Row style={{ marginTop: '10px', }}>
                                        <Col span={12}>
                                            <Badge
                                                status="processing"
                                                text={"应巡计划：" + this.state.should + "个"} />
                                        </Col>
                                        <Col span={12}>
                                            <Badge
                                                status="success"
                                                text={"实际完成：" + this.state.real + "个"} />
                                        </Col>
                                        <Col span={24}>
                                            <Badge
                                                status="warning"
                                                text={"巡检项目数/已完成数/发现隐患数：" +
                                                    this.state.all + "/" + this.state.done + "/" + this.state.abnormal} />
                                        </Col>
                                    </Row>
                                </div>
                                {/* {this.state.need == true ?
                                <div className="gegeratePlan" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', zIndex: '99'}}>
                                    <span>缺失计划，可手动生成缺失的计划</span>
                                    <Button style={{ width: '60%', marginTop: '20px'}} type="primary" loading={this.state.loading} onClick={this.weChatInspectPlanRecover}>生成本月计划</Button>
                                </div> : null} */}
                            </div>
                            <div style={{
                                width: '100%',
                                marginTop: '10px',
                            }}>
                                {cards}
                            </div>
                        </Skeleton>
                    </div>) : (
                        <div style={{ textAlign: 'center', paddingTop: '12.5rem' }}>
                            <div>
                                <img className="icon" src={require("../img/attention.png")} />
                                <h4 className="tip">本校暂无月巡检计划，请前往后台配置！</h4>
                            </div>
                        {/* {this.state.need == true ?
                            <div className="gegeratePlan" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', zIndex: '99'}}>
                                <span>缺失计划，可手动生成缺失的计划</span>
                                <Button style={{ width: '60%', marginTop: '20px'}} type="primary" loading={this.state.loading} onClick={this.weChatInspectPlanRecover}>生成本月计划</Button>
                            </div> : 
                            <div>
                                <img className="icon" src={require("../img/attention.png")} />
                                <h4 className="tip">本校暂无月巡检计划，请前往后台配置！</h4>
                            </div>} */}
                    </div>
                    )}
            </div>
        )
    }
}

export default WechatProgressRequiry;